<template>
  <div>
    <el-alert type="info" show-icon :closable="false">
      <template v-slot:title>
        <span v-if="allQuestions">数据一共 {{ total }}条</span>
      </template>
    </el-alert>
    <el-table :data="allQuestions" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="100">
      </el-table-column>
      <el-table-column prop="subjectID" label="学科" width="80">
        <template slot-scope="{ row }">
          {{
            simple.filter(v => v.value == row.subjectID).length > 0
              ? simple.filter(v => v.value == row.subjectID)[0].label
              : ""
          }}
          <!-- {{ simple.filter(v => v.value == row.subjectID)[0].label }} -->
        </template>
      </el-table-column>
      <el-table-column prop="catalogID" label="目录" width="80">
        <template slot-scope="{ row }">
          {{
            secondMenus.filter(v => v.id === row.catalogID).length > 0
              ? secondMenus.filter(v => v.id === row.catalogID)[0].directoryName
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="80">
        <template slot-scope="{ row }">
          <span v-if="row.questionType === '1'">单选</span>
          <span v-else-if="row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="180">
        <template slot-scope="{ row }">
          <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间">
        <template slot-scope="{ row }">
          {{ row.addDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度">
        <template slot-scope="{ row }">
          <span v-if="row.difficulty === '1'">简单</span>
          <span v-else-if="row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人"> </el-table-column>
      <el-table-column prop="chkState" label="审核状态">
        <template slot-scope="{ row }">
          <!-- <span v-if="row.chkState === '0'">待审核</span>
          <span v-else-if="row.chkState === '1'">通过</span>
          <span v-else>拒绝</span> -->
          {{
            row.chkState == "0"
              ? "待审核"
              : row.chkState == "1"
              ? "已审核"
              : "已拒绝"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见"> </el-table-column>
      <el-table-column prop="chkUser" label="审核人"> </el-table-column>
      <el-table-column prop="publishState" label="发布状态">
        <template slot-scope="{ row }">
          <span v-if="row.publishState == '1'">下架</span>
          <span v-else-if="row.publishState == '0'">上架</span>
          <span v-else>待发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" sortable="" fixed="right" width="280">
        <!-- <template v-slot="{ row }"> -->
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="previewShow(row)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.chkState != 0"
            @click="checkShow(row)"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="$router.push({ path: '/entering', query: row })"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="editPush(row)">{{
            row.publishState == "0" ? "下架" : "上架"
          }}</el-button>
          <el-button type="text" size="small" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览弹框 -->
    <el-dialog
      v-if="ispreviewShow"
      title="题目预览"
      :visible.sync="ispreviewShow"
      width="80%"
      :before-close="handleClose"
    >
      <div>
        <el-row type="flex" justify="space-around" class="headlinetitle">
          <div class="headline">
            [题型]：
            <span v-if="rowText.questionType === '1'">单选</span>
            <span v-else-if="rowText.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </div>
          <div class="headline">[编号]：{{ rowText.id }}</div>
          <div class="headline">
            [难度]：
            <span v-if="rowText.difficulty === '1'">简单</span>
            <span v-else-if="rowText.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </div>
          <div class="headline">[标签]：{{ rowText.tags }}</div>
        </el-row>
        <el-row type="flex" justify="flex-start" style=" margin: 10px 0;">
          <div class="headline">
            [学科]：
            <span>{{ rowText.subject }} </span>
          </div>
          <div class="headline">[目录]：{{ rowText.catalog }}</div>
          <div class="headline">[方向]：{{ rowText.direction }}</div>
        </el-row>
        <hr />
        <div class="headbody">
          <div>[题干]：</div>
          <div v-html="rowText.question"></div>
          <div v-if="rowText.questionType === '1'">
            <el-radio
              v-for="item in myoptions"
              :key="item.id"
              :value="item.isRight == 1 ? item.id : ''"
              :label="item.id"
              >{{ item.code }}:{{ item.title }}</el-radio
            >
          </div>
          <div v-if="rowText.questionType === '2'">
            <el-radio
              v-for="item in myoptions"
              :key="item.id"
              :value="item.isRight == 1 ? item.id : ''"
              :label="item.id"
              >{{ item.code }}:{{ item.title }}</el-radio
            >
            <!-- <el-checkbox
              v-for="item in myoptions"
              :key="item.id"
              :value="item.isRight == 1 ? item.id : ''"
              :label="item.id"
              >{{ item.code }} {{ item.title }}</el-checkbox
            > -->
          </div>
        </div>
        <hr />
        <div class="headbody">
          [参考答案]：
          <div style="width:400px">
            <el-button
              type="primary"
              @click="playVideo()"
              ref="btn"
              size="mini"
            >
              视频答案预览
            </el-button>
            <video
              v-if="dialogPlay"
              :src="rowText.videoURL"
              controls
              autoplay
              class="video"
              width="100%"
            ></video>
          </div>
        </div>
        <hr />
        <div class="headbody">
          [答案解析]：
          <div v-html="rowText.answer"></div>
        </div>
        <hr />
        <div class="headbody">
          [题目备注]：
          <div>{{ rowText.remarks }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ispreviewShow = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog
      v-if="checkShowClose"
      title="题目审核"
      :visible.sync="chechShow"
      width="30%"
      :before-close="checkShowClose"
    >
      <el-row style="margin-top: 20px;">
        <el-radio v-model="chkState" label="1">通过</el-radio>
        <el-radio v-model="chkState" label="2">拒绝</el-radio>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-input
          type="textarea"
          placeholder="请输入审核意见"
          v-model="chkRemarks"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkShowClose = false">取 消</el-button>
        <el-button type="primary" @click="isOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getparticulars } from "@/api/choiceness";
export default {
  props: {
    allQuestions: {
      type: Array,
      default: null
    },
    total: {
      type: Number
    },
    simple: {
      type: Array
    },
    secondMenus: {
      type: Array
    },
    mydirection: {
      type: Array
    }
  },
  //   watch:{
  //     total:function(value){
  // console.log(value);
  //     }
  //   },
  data() {
    return {
      ispreviewShow: false,
      // 弹框显示内容
      rowText: {},
      // 选项
      myoptions: [],
      dialogPlay: false,
      chechShow: false,
      chkState: "0", //审核状态
      chkRemarks: "", // 审核意见
      checkid: "" //审核的id
    };
  },
  mounted() {
    // console.log(this.total);
  },
  created() {
    // console.log(this.total);
  },
  computed: {},
  methods: {
    // getobject() {
    //   console.log(this.allQuestions.filter(item => item.subjectID));
    // },
    // 预览
    previewShow(row) {
      this.ispreviewShow = true;
      this.rowText = row;
      // console.log(this.rowText);
      this.getparticulars();
    },
    async getparticulars() {
      const { data } = await getparticulars(this.rowText.id);
      this.myoptions = data.options;
    },
    handleClose(done) {
      this.dialogPlay = false;
      done();
    },
    // 视频播放
    playVideo() {
      this.dialogPlay = true;
    },
    async del(row) {
      // console.log(row);
      this.$emit("del", row.id);
      //
    },
    // 上架下架
    editPush(row) {
      this.$confirm("您确认下架这道题目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (row.publishState == "0") {
            this.$emit("changePush", { id: row.id, publishState: "1" });
          } else if (row.publishState == "1") {
            this.$emit("changePush", { id: row.id, publishState: "0" });
          } else {
            this.$emit("changePush", { id: row.id, publishState: "2" });
          }
          this.$message({
            type: "success",
            message: "上架成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上架"
          });
        });
    },
    // 显示审核弹框
    checkShow(row) {
      this.chechShow = true;
      this.chkState = row.chkState;
      this.checkid = row.id;
      // console.log(this.checkid);
    },

    // 提交审核
    isOK() {
      // console.log(this.chkState);
      this.$emit("getcheck", {
        id: this.checkid,
        chkState: parseInt(this.chkState),
        chkRemarks: this.chkRemarks
      });
      this.checkShowClose();
    },

    // 关闭审核窗口
    checkShowClose() {
      this.chechShow = false;
    }
  }
};
</script>

<style lang="scss">
.el-dialog__header {
  background-color: #409eff;
  .el-dialog__title {
    color: #fff;
    font-weight: 600;
  }
  .el-dialog__close {
    color: #fff;
  }
}

.headlinetitle {
  margin-top: 20px;
  flex-wrap: wrap;
}
.headline {
  width: 25%;
}
.headbody {
  width: 100%;
}
</style>
